<script setup>
import { onMounted } from 'vue'
import { reactive, ref } from 'vue'
const formRef = ref()

// 表单数据
const formState = reactive({
  /** 员工账号 id */
  employeeNumber: undefined,
  /** 员工姓名 */
  name: undefined,
  /** 工作模式 */
  workPatternId: undefined,
  /** 月份 */
  month: undefined,
  /** 所属机构 */
  agencyName: undefined,
})

// 工作模式 - 下拉框数据
const workPatternOptions = [
  {
    value: '1',
    name: '周末双休',
  },
  {
    value: '2',
    name: '周日单休',
  },
  {
    value: '3',
    name: '连续上班996',
  },
  {
    value: '4',
    name: '999999999',
  },
  {
    value: '5',
    name: '上四休三',
  },
  {
    value: '6',
    name: '暂无排班',
  },
]
// 应载体积 - 下拉框数据
const agencyOptions = [
  {
    value: '1',
    name: '东北转运中心',
  },
  {
    value: '2',
    name: '华北转运中心',
  },
  {
    value: '3',
    name: '华南转运中心',
  },
  {
    value: '4',
    name: '华中转运中心',
  },
  {
    value: '5',
    name: '华东转运中心',
  },
  {
    value: '6',
    name: '西南转运中心',
  },
  {
    value: '6',
    name: '金牛区营业部',
  },
  {
    value: '6',
    name: '西北转运中心',
  },
]

defineProps({
  /** 页码 */
  page: {
    type: Number,
    default: 1,
  },
  /** 页容量 */
  pageSize: {
    type: Number,
    default: 10,
  },
})

const emit = defineEmits(['init', 'finish', 'reset', 'update:page', 'update:pageSize'])
// 点击搜索按钮
const onFinish = async () => {
  // 重置页码
  emit('update:page', 1)
  // 重新获取数据
  emit('finish', formState)
}

// 表单初始化
onMounted(() => {
  emit('init', formState)
})

// 重置表单
const onReset = async () => {
  // 重置页码和页容量
  emit('update:page', 1)
  emit('update:pageSize', 10)
  // 重置表单后，重新获取数据
  await formRef.value.resetFields()
  emit('reset', formState)
}
</script>

<template>
  <a-form ref="formRef" :model="formState" @finish="onFinish">
    <a-row :gutter="24">
      <a-col :span="8">
        <a-form-item label="员工账号" :name="'employeeNumber'">
          <a-input
            allow-clear
            v-model:value="formState.employeeNumber"
            placeholder="请输入员工账号"
          ></a-input>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="员工姓名" :name="'name'">
          <a-input
            allow-clear
            v-model:value="formState.name"
            placeholder="请输入员工账号"
          ></a-input>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="工作模式" :name="'workPatternId'">
          <a-select v-model:value="formState.workPatternId" allowClear placeholder="请选择工作模式">
            <a-select-option
              v-for="item in workPatternOptions"
              :key="item.value"
              :value="item.value"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="月份" :name="'month'">
          <a-input allow-clear v-model:value="formState.month" placeholder="请选择月份"></a-input>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="所属机构" :name="'agencyName'">
          <a-select v-model:value="formState.agencyName" allowClear placeholder="请选择所属机构">
            <a-select-option v-for="item in agencyOptions" :key="item.value" :value="item.value">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-space>
          <a-button type="primary" html-type="submit">搜索</a-button>
          <a-button @click="onReset">重置</a-button>
        </a-space>
      </a-col>
    </a-row>
  </a-form>
</template>
